<template>
  <div class="bottom-bar">
    <div class="bar-content">
      <router-link class="btn" to="/home">
        <span
          class="iconfont myiconfont icon-shouye"
          :class="{ active: currentPath == '/home' }"
        ></span>
        <span>首页</span>
      </router-link>
    </div>
    <div class="bar-content">
      <router-link class="btn" to="/cate">
        <span
          class="iconfont myiconfont icon-leimupinleifenleileibie"
          :class="{ active: currentPath == '/cate' }"
        ></span>
        <span>分类</span>
      </router-link>
    </div>
    <div class="bar-content">
      <router-link class="btn" to="/order">
        <span
          class="iconfont myiconfont icon-dingdan"
          :class="{ active: currentPath == '/order' }"
        ></span>
        <span>订单</span>
      </router-link>
    </div>
    <div class="bar-content">
      <router-link class="btn" to="/about">
        <span
          class="iconfont myiconfont icon-wode"
          :class="{ active: currentPath == '/about' }"
        ></span>
        <span>我的</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPath: "",
    };
  },
  created() {
    this.currentPath = this.$route.path;
  },
};
</script>

<style lang="scss" scoped>
.active {
  color: #4fb8fd;
}
.bottom-bar {
  padding: 0 0.533333rem;
  width: 100%;
  height: 1.333333rem;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .bar-content {
    .btn {
      display: flex;
      flex: 1;
      height: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .myiconfont {
      font-size: 0.56rem;
    }
    .btn {
      font-size: 0.293333rem;
      margin-top: 0.133333rem;
      color: #999;
    }
  }
}
</style>